<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>Marketing Kit - Mobile</title>
		<link rel="stylesheet" href="css/themes/Bootstrap.css">
		<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0.min.css" />
		<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
		<script src="js/jquery-1.8.2.min.js"></script>
		<script src="js/jquery.mobile-1.4.0.min.js"></script>
		<script type="text/javascript" src="cordova.js"></script>
		<script>
			//global variable
			var compName = localStorage.getItem('ls_compname');
			var updateStatus = localStorage.getItem('ls_update');
			var compId = localStorage.getItem('ls_compid');		
			//alert('this list_product_0.htm');
			
			var db = null;	
			
			//load database
			init();
			
			$(document).ready(function(){
				//change title with company name
				$('#lableTitle').text(compName);
				var nameId = window.localStorage.getItem('subname_level0');
				$('#labelCat').text(nameId);
				
				$("#btnBack").click(function(){
					$.mobile.loading( 'show', {
						text: 'Loading to menu utama!',
						textVisible: true,
						theme: 'c',
						html: ""
					});
					var oldSubId = window.localStorage.getItem('sub_level')
					var param = 'sub_id='+oldSubId;
					window.location="menu_page.htm?"+param;
				});
				
			});
			
			function getPage(newSubId,newNameId,oldSubId){
				$.mobile.loading( 'show', {
						text: 'Loading to menu '+newNameId+'!',
						textVisible: true,
						theme: 'c',
						html: ""
					});
				
				window.localStorage.setItem('sub_level1', newSubId);
				window.localStorage.setItem('subname_level1',newNameId);
				
				var param = 'sub_id='+newSubId+'&name_id='+newNameId+'&old_sub_id='+oldSubId;				
				window.location="list_product_1.htm?"+param;		
					
			}
			
			function getParam( name ){
				name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
				var regexS = "[\\?&]"+name+"=([^&#]*)";  
				var regex = new RegExp( regexS );  
				var results = regex.exec( window.location.href ); 
				if( results == null )
					return "";  
				else
					return results[1];
			}
			
			function onDeviceReady(){
				try{
					$.mobile.loading( 'show', {
						text: 'Loading to create menu!',
						textVisible: true,
						theme: 'c',
						html: ""
					});
					db = window.openDatabase("marketkit", "1.0", "Market Kit Database", 1000000);
					db.transaction(
						function(tx){			
							var subId = getParam('sub_id');												
							var sql = 'select * from tb_categories where sub_id='+subId;
							//alert('sql:'+sql);													
							tx.executeSql(sql, [], 
								function (tx, result){
									var index=0;
									for(var i=0;i<result.rows.length;i++){
										var obj = result.rows.item(i);									
										$('.listProduk').append('<a href="#" onClick="getPage('+obj.cat_id+',\''+obj.name+'\','+obj.sub_id+')" data-role="button" id="btn'+obj.name+'" name="btn'+obj.name+'" data-icon="'+obj.icon+'" data-theme="c">'+obj.name+'</a>');
										$('#listProduk').trigger('create');	
										index++;
									}
									
									if(index==0){
										$('#listProduk').html('<div align="center"><strong style="color:red">Tidak ada menu</strong></div>');
									}
								});
							}, function(err){
								alert('err sql :'+err);
							}, function(){
								$.mobile.loading( 'hide', {
									text: 'Loading to create menu!',
									textVisible: true,
									theme: 'c',
									html: ""
								});
							}
						);
				}catch(e){
					alert('print e:'+e);
				}
			}
			
			function init(){
	   			document.addEventListener("deviceready",onDeviceReady, false);
	   		}
		</script>
	</head>
	<body>
		<div data-role="page" data-theme="c">
			<div data-role="header" data-position="inline">
				<a href="#" id="btnBack" name="btnBack" data-icon="arrow-l" data-theme="c">Back</a>	
				<h1 id="lableTitle">Marketing Kit - Mobile</h1>
			</div>
			<div data-role="content" data-theme="a">
				<strong style="color:red" id="labelCat"></strong>
				<div id="listProduk" class="listProduk" data-role="content" data-theme="a">	
					
				</div>
			</div>
		</div>
	
	</body>
</html>